<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">





  <link rel="alternate" href="/atom.xml" title="renhao" type="application/atom+xml">






<meta name="description" content="本文总结下面试中常被问到的 css 问题。">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试总结 css 部分">
<meta property="og:url" content="https://huangrenhao.gitee.io/2020/09/24/css-interview/index.html">
<meta property="og:site_name" content="renhao">
<meta property="og:description" content="本文总结下面试中常被问到的 css 问题。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://huangrenhao.gitee.io/2020/09/24/css-interview/css-wrap-overflow.jpg">
<meta property="og:updated_time" content="2020-10-10T09:47:55.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端面试总结 css 部分">
<meta name="twitter:description" content="本文总结下面试中常被问到的 css 问题。">
<meta name="twitter:image" content="https://huangrenhao.gitee.io/2020/09/24/css-interview/css-wrap-overflow.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://huangrenhao.gitee.io/2020/09/24/css-interview/">





  <title>前端面试总结 css 部分 | renhao</title>
  








<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>

<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">
  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">renhao</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://huangrenhao.gitee.io/2020/09/24/css-interview/">

    <span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
      <meta itemprop="name" content="renhao">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="renhao">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">前端面试总结 css 部分</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-09-24T09:51:28+08:00">
                2020-09-24
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                  <a href="/categories/interview/" itemprop="url" rel="index">
                    <span itemprop="name">interview</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2020/09/24/css-interview/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count valine-comment-count" data-xid="/2020/09/24/css-interview/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  6.6k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  24
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>本文总结下面试中常被问到的 css 问题。 <a id="more"></a></p>
<h2 id="BFC"><a href="#BFC" class="headerlink" title="BFC"></a>BFC</h2><p>盒模型中对一个元素设置css需要元素是block类型还是inline类型。BFC就是用来格式化块级（block）盒子，还有管理inline类型的盒子IFC，以及其他的FC。FC（Formatting Context)指页面中的一个渲染区域并且拥有一套渲染规则（决定了其他子元素如何定位以及与其他元素的相互关系和作用）。BFC即块级格式化上下文，指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局且与区域外部无关。</p>
<h3 id="BFC的生成"><a href="#BFC的生成" class="headerlink" title="BFC的生成"></a>BFC的生成</h3><p>css2.1中规定满足下列css声明之一的元素便会生成BFC：</p>
<ul>
<li>float的值不为none</li>
<li>overflow的值不为visible</li>
<li>display的值为inline-block、table-cell、table-caption（display为table也可以生成，但在于Table会默认生成一个匿名的table-cell）</li>
<li>position的值为absolute或fixed</li>
</ul>
<h3 id="BFC的约束规则"><a href="#BFC的约束规则" class="headerlink" title="BFC的约束规则"></a>BFC的约束规则</h3><p>浏览器对BFC区域的约束规则：</p>
<ul>
<li><p>生成BFC元素的子元素会一个接一个的放置，垂直方向上它们的起点是一个包含块的顶部，两个相邻子元素之间垂直距离取决于元素margin特性。在BFC中相邻的块级元素外边距会折叠。</p>
</li>
<li><p>生成BFC元素的子元素中，每一个子元素的外边距和包含块的左边界相接触（对于从右到左的格式化右外边距和右边界相接触），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。</p>
</li>
</ul>
<blockquote>
<p>详细说明：</p>
<ul>
<li>内部的Box会在垂直方向上一个接一个的放置</li>
<li>垂直方向上的距离由margin决定（属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关）</li>
<li>每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此（说明BFC中的子元素不会超过它的包含块，而position为absolute的元素可以超过它的包含块边界）</li>
<li>BFC的区域不会与float的元素区域重叠</li>
<li>计算BFC的高度时，浮动子元素也参与计算。</li>
<li>BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然</li>
</ul>
<p>类似css规则：</p>
<ul>
<li>Block元素会扩展到与父元素同宽，所有block元素会垂直排列</li>
<li>垂直方向上两个相邻div的margin会重叠，而水平方向可能不会</li>
<li>浮动元素会尽量往左上方（或右下方）</li>
<li>为父元素设置overflow：hidden或浮动父元素，则会包含浮动元素</li>
</ul>
</blockquote>
<h3 id="BFC在布局中的应用"><a href="#BFC在布局中的应用" class="headerlink" title="BFC在布局中的应用"></a>BFC在布局中的应用</h3><ul>
<li><p>防止margin相互重叠</p>
<p>同一个BFC中两个相邻的Box才会发生重叠，与方向无关。阻止margin重叠只要将两个元素别放在一个BFC中即可（可以让相邻元素其中一个生成BFC），我们甚少看到水平方向的margin重叠，但可以设置writing-mode（文本水平或垂直排布以及块级元素中文本的行进方向）使其水平排列的时候可能会出现margin水平方向重叠，<a href="https://codepen.io/jackchuchou/pen/eYZMawr" target="_blank" rel="noopener">水平方向外边距合并 demo</a> <a href="https://codepen.io/jackchuchou/pen/QWNmXEO" target="_blank" rel="noopener">bfc 解决外边距合并 demo</a></p>
</li>
<li><p>浮动相关问题</p>
<p>为了使父元素包含子浮动元素，常见的方式是父元素设置overflow：hidden或浮动父元素。根本原因在于将父元素变为BFC，子浮动元素就会参与其高度计算（即不会产生高度塌陷问题），overflow：hidden与正常流最接近。<a href="https://codepen.io/jackchuchou/pen/QWNmXKO" target="_blank" rel="noopener">bfc 解决高度塌陷 demo</a></p>
</li>
<li><p>多栏布局的一种方式</p>
<p>与浮动元素相邻的已生成BFC元素不能与浮动元素相互覆盖，可以实现多栏布局，<a href="https://codepen.io/jackchuchou/pen/xxVWoEe" target="_blank" rel="noopener">demo</a></p>
</li>
</ul>
<h2 id="水平居中"><a href="#水平居中" class="headerlink" title="水平居中"></a>水平居中</h2><ul>
<li><p>文本、行内元素、行内块级元素：text-align（text-align只控制行内内容如何相对他的块父元素对齐）</p>
<p>简单快捷，容易理解，兼容性好，但只对行内内容有效，属性会继承影响到后代行内内容，当子元素宽度大于父元素宽度则无效。</p>
</li>
<li><p>单个块级元素：利用margin中auto，在margin有节余的同时如果左右margin设置了auto，将会均匀分配剩余空间。如果上下的margin设置了auto，其计算值为0。</p>
<p>缺点是必须定宽，并且值不能为auto，宽度要小于父元素（否则无效）。</p>
</li>
<li><p>多个块级元素：将块级元素display属性指定为行内或者行内块级形式，然后利用text-align控制行内块级元素来控制块级元素的水平居中。但块级元素改为inline-block换行、空格会产生元素间隔。</p>
</li>
<li><p>使用绝对定位：子元素绝对定位，父元素相对定位，top、right、bottom、left的值是相对于父元素尺寸的，<s>margin和</s>transform是相对于自身尺寸，组合使用达到水平居中。可以将left设为50%（父元素宽度的一半），然后将子元素向右平移50%（自身宽度的一半）。</p>
<p>不管是块级元素还是行内元素都可以实现，但是脱离了文档流。</p>
</li>
<li><p>任意个元素：flex，设置当前主轴的对齐方式为居中即<code>justify-content:center</code></p>
</li>
</ul>
<p>对于水平居中首先应该考虑哪些元素有自带的居中效果，即考虑行内元素或者行内块级元素，一般都以<code>text-align:center</code>，其次去考虑可不可以使用<code>margin:0 auto</code>，还是不行的话可以使用绝对定位或者flex布局，移动端能用flex就用flex。</p>
<h2 id="垂直居中"><a href="#垂直居中" class="headerlink" title="垂直居中"></a>垂直居中</h2><ul>
<li>单行文本、行内元素、行内块级元素：line-height（与height等值）。line-height最终表现是通过inline box实现，无论inline box所占的高度是多少其占据的空间都是与文字内容公用水平中垂线。设置父元素中line-height等于height的值。缺点是只能作用于单行行内内容，并且需要知道高度的值。</li>
<li>多行文本、行内元素、行内块级元素：通过用span把所有文字包裹起来，设置display：inline-block将其转化为行内块级元素解决。</li>
<li>图片：可以在图片上设置vertical-align:middle（默认为基线对齐），然后在父元素中设置line-height与height相等，并设置font-size为0后才可以完全垂直居中。如果是块级元素也可同样设置，但需要对这个块级元素设置宽高，并<code>display:inline-block</code> 使其具有行内特性。</li>
<li><p>position：父元素非 static，子元素绝对定位，top 为 50%，<s>margin-top 为 -50%或者</s> <code>transform:translateY(-50%)</code></p>
</li>
<li><p>flex：父元素 <code>display:flex</code>，<code>align-item:center</code>。</p>
</li>
</ul>
<h2 id="css-中可以继承的属性"><a href="#css-中可以继承的属性" class="headerlink" title="css 中可以继承的属性"></a>css 中可以继承的属性</h2><ul>
<li>字体：font、font-family、font-size、font-weight、font-style</li>
<li>文本：text-align、work-spacing、line-height、letter-spacing、color</li>
<li>元素可见性：visibility</li>
<li>光标属性：cursor</li>
<li>box-sizing</li>
</ul>
<h2 id="css-作用域（选择器）权重"><a href="#css-作用域（选择器）权重" class="headerlink" title="css 作用域（选择器）权重"></a>css 作用域（选择器）权重</h2><ol>
<li>第一等：代表内联样式，如: style=””，权值为1000。</li>
<li>第二等：代表ID选择器，如：#content，权值为0100。</li>
<li>第三等：代表类，伪类和属性选择器，如.content，:hover，:not（否定选择器、条件选择器），权值为0010。</li>
<li>第四等：代表类型选择器和伪元素选择器，如div p,::before，权值为0001。</li>
<li>通配符、子选择器、相邻选择器等的。如*、&gt;、+,权值为0000。</li>
<li>继承的样式没有权值。</li>
</ol>
<blockquote>
<p>权重是 256 进制数，1,0,0,0 &gt; 0,99,99,99，也就是说从左往右逐个等级比较，前一等级相等才往后比，每一级都有自己的最大值<strong>（最大数目255）</strong>，<strong>超出时就会应用其最大值（最大数目），超过255仍用最大值</strong>。<code>!important</code>的权重是正无穷（有界，可计算）。权重相同后面覆盖前面。</p>
</blockquote>
<h2 id="z-index-有什么属性会影响"><a href="#z-index-有什么属性会影响" class="headerlink" title="z-index 有什么属性会影响"></a>z-index 有什么属性会影响</h2><p>设置元素的堆叠顺序。该属性设置一个定位元素沿 Z轴的位置，Z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。</p>
<blockquote>
<p>层叠顺序表：（1-7，最底层-最外层）</p>
<ol>
<li><p>形成层叠上下文环境的元素的背景与边框</p>
</li>
<li><p>拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）</p>
</li>
<li><p>正常流式布局，非 inline-block，无 position 定位（static除外）的子元素</p>
</li>
<li><p>无 position 定位（static除外）的 float 浮动元素</p>
</li>
<li><p>正常流式布局,inline-block元素,无 position 定位（static除外）的子元素（包括 display:table 和display:inline ）</p>
</li>
<li><p>拥有 z-index:0 的子堆叠上下文元素</p>
</li>
<li><p>拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）</p>
</li>
</ol>
</blockquote>
<p>元素一旦成为定位元素，其z-index就会自动生效，此时其<code>z-index</code>就是默认的<code>auto</code>，也就是0级别，根据上面的层叠顺序表，就会覆盖<code>inline</code>或<code>block</code>或<code>float</code>元素。<br>层叠上下文可以嵌套，<strong>内部层叠上下文及其所有子元素均受制于外部的层叠上下文</strong>，<strong>父元素的<code>z-index</code> 低于父元素另一个同级元素，子元素 z-index再高也没用</strong>。</p>
<blockquote>
<p>面试题：如何防止父元素的z-index小但是子元素的z-index大？</p>
</blockquote>
<blockquote>
<p><a href="https://www.jianshu.com/p/a7cf99fc3b2f" target="_blank" rel="noopener">参考</a></p>
</blockquote>
<h3 id="position属性常用的取值和它们的基本行为"><a href="#position属性常用的取值和它们的基本行为" class="headerlink" title="position属性常用的取值和它们的基本行为"></a>position属性常用的取值和它们的基本行为</h3><ul>
<li><p>static</p>
<p>static是position属性的默认值，定位方式为静态文档流。</p>
</li>
<li><p>relative：对文档流位置偏移</p>
</li>
<li><p>absolute：根据第一个非 static 的父节点进行定位</p>
</li>
<li><p>fixed：根据 viewport 定位</p>
</li>
<li><p>sticky：static+fixed 的组合。<strong>粘性定位</strong>，需要配合 top、bottom、left、right 中的任意一种，只有达到指定的阈值才会被固定。</p>
<blockquote>
<p>sticky 的兼容性问题处理的解决方案？</p>
</blockquote>
</li>
</ul>
<h3 id="相对于什么"><a href="#相对于什么" class="headerlink" title="% 相对于什么"></a>% 相对于什么</h3><ul>
<li>font-size：把 font-size 设置为基于父元素的一个百分比值。</li>
<li>line-height：基于当前字体尺寸的百分比行间距。</li>
<li>width：正常文档流中和设置浮动的情况下，相对于父元素content-box的宽度；绝对定位时，相对于包含块padding-box的宽度。</li>
<li>height：和width还是有一个明显的区别是当父元素width属性为auto时，子元素宽度仍然可以使用百分比设置。但是对于height，只要子元素还是在正常文档流当中的，如果父元素的height属性为auto，则子元素height设置为百分比会被忽略。规范中指出：如果包含块的高度没有显式指出（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。而auto*100/100=NaN。</li>
<li>margin、padding：无论是垂直或水平方向，均是相对于父元素的宽度，正常文档流中和设置浮动的情况下，相对于父元素content-box的宽度；绝对定位时，相对于包含块padding-box的宽度。</li>
<li>left、right、top、bottom： top,bottom设置百分比定位是按包含块padding-box的高度来计算的，同样left,right,设置百分比定位是按包含块padding-box的宽度来计算的。</li>
</ul>
<blockquote>
<p>padding-box、content-box、border-box：这三种都表示的是盒模型中盒子宽度的大小，从里向外依次增大，即 content-box &lt; padding-box &lt; border-box。box-sizing 只有 content-box、border-box、innitial、inherit、unset 几种，但本质上还是两种即 标准盒模型和IE盒模型。</p>
</blockquote>
<blockquote>
<p><a href="https://blog.csdn.net/sunshine1990916/article/details/80938294" target="_blank" rel="noopener">参考</a></p>
</blockquote>
<h3 id="sass、less-相较于-css-有哪些优点"><a href="#sass、less-相较于-css-有哪些优点" class="headerlink" title="sass、less 相较于 css 有哪些优点"></a>sass、less 相较于 css 有哪些优点</h3><blockquote>
<p><strong>1、Less：</strong></p>
<p>是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。</p>
<p>Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。</p>
<p>2、Sass：</p>
<p>是一种动态样式语言，Sass语法属于缩排语法，</p>
<p>比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。</p>
<p>3、Sass与Scss是什么关系?</p>
<p>Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。</p>
</blockquote>
<p>共同点：</p>
<p>1、混入(Mixins)——class中的class；</p>
<p>2、参数混入——可以传递参数的class，就像函数一样；</p>
<p>3、嵌套规则——Class中嵌套class，从而减少重复的代码；</p>
<p>4、运算——CSS中用上数学；</p>
<p>5、颜色功能——可以编辑颜色；</p>
<p>6、名字空间(namespace)——分组样式，从而可以被调用；</p>
<p>7、作用域——局部修改样式；</p>
<p>8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。</p>
<p>不同：</p>
<ul>
<li>用 Less 可以满足大多数场景的需求，但相比另外两者，基于 Less 开发类库会复杂得多，实现的代码会比较脏，能实现的功能也会受到 DSL 的制约。比 Stylus 语义更清晰、比 Sass 更接近 CSS 语法，使得刚刚转用 CSS 预编译的开发者能够更平滑地进行切换。Less 支持浏览器端编译。</li>
<li>当初 Sass 并不支持 SCSS 语法，使得转投 Sass 成本较高，后来引入支持 css 语法的 scss 。从功能上来说 Sass 大而全，语义明晰但是代码很容易显得累赘。主项目基于 Ruby 可能也是一部分人不选择它的理由</li>
</ul>
<h3 id="flex-布局（flexible-box，弹性布局）常用属性"><a href="#flex-布局（flexible-box，弹性布局）常用属性" class="headerlink" title="flex 布局（flexible box，弹性布局）常用属性"></a>flex 布局（flexible box，弹性布局）常用属性</h3><h4 id="父元素上"><a href="#父元素上" class="headerlink" title="父元素上"></a>父元素上</h4><ul>
<li><strong>flex-direction</strong>：决定主轴方向（项目的排列方向）<ul>
<li>row（默认起点为水平左端）</li>
<li>row-reverse（起点为水平右端）</li>
<li>column（起点为垂直上沿）</li>
<li>column-reverse（起点为垂直下沿）</li>
</ul>
</li>
<li><strong>flex-wrap</strong>：一条轴线排不下如何换行<ul>
<li>nowrap（默认不换行）</li>
<li>wrap（换行，第一行在上方）</li>
<li>wrap-reverse（换行，第一行在下方）</li>
</ul>
</li>
<li><strong>flex-flow</strong>：flex-direction 和 flex-wrap 的合并</li>
<li><strong>justify-content</strong>：项目在主轴上的对齐方式（默认情况下即水平方向的对齐方式）<ul>
<li>flex-start（默认左对齐）</li>
<li>flex-end（右对齐）</li>
<li>center（居中）</li>
<li>space-between（两端对齐，项目之间间隔相等）</li>
<li>space-around（每个项目两侧间隔相等，项目之间的间隔时项目与边框间隔的两倍）</li>
</ul>
</li>
<li><strong>align-items</strong>：项目在交叉轴上如何对齐（默认情况下即垂直方向上的对齐方式）<ul>
<li>flex-start （交叉轴起点对齐）</li>
<li>flex-end（交叉轴终点对齐)</li>
<li>center（交叉轴中点对齐）</li>
<li>baseline（项目第一行文字的基线对齐）</li>
<li>stretch（默认项目未设置高度或者 auto 时将会占满整个容器的高度）</li>
</ul>
</li>
<li><strong>align-content</strong>：多根轴线的对齐方式<ul>
<li>flex-start（与交叉轴起点对齐）</li>
<li>flex-end（与交叉轴终点对齐）</li>
<li>center（与交叉轴中点对齐）</li>
<li>space-between（与交叉轴两端对齐，轴线之间的间隔平均分布）</li>
<li>space-around（每根轴线两侧间隔相等）</li>
<li>stretch（轴线占满整个交叉轴）</li>
</ul>
</li>
</ul>
<h4 id="子元素"><a href="#子元素" class="headerlink" title="子元素"></a>子元素</h4><ul>
<li><p>order：项目的排列顺序，数值越小排列越靠前</p>
</li>
<li><p><strong>flex-grow</strong>：项目的放大比例，默认0</p>
</li>
<li><p><strong>flex-shrink</strong>：项目的缩小比例，默认1</p>
</li>
<li><p><strong>flex-basis</strong>：项目占据主轴的空间（同 width、height），默认为 auto（项目本来大小），另外还可设置为 content、长度或百分比值。auto 时查看当前项有无设置宽度，如果有则使用该宽度，否则以包含的内容决定宽度；content 一律以内容决定宽度；百分比则是相对于容器而言，如果包含块注尺寸未定义，则计算结果和 auto 一样。</p>
</li>
<li><p><strong>flex：flex-grow、flex-shrink、flex-basis 的合并简写</strong></p>
<ul>
<li>可以赋值为三个值</li>
<li><strong>可以赋值为 auto，表示 flex-grow、flex-shrink 均为 1，flex-basis 为 auto</strong></li>
<li>可以赋值为 none，表示 flex-grow、flex-shrink 均为 0，flex-basis 为 auto</li>
<li><strong>可以赋值为非负数，该数字表示 flex-grow，flex-shrink ，flex-basis 取 0%</strong></li>
<li>可以赋值为一个长度（px）或百分比，该数字表示 flex-basis，flex-grow 与 flex-shrink 取 1</li>
<li>可以赋值为两个非负数，分别表示 flex-grow 与 flex-shrink，flex-basis 取 0%</li>
<li>可以赋值为一个非负数和一个长度（px）或百分比，分别设为 flex-grow 与 flex-basis 的值，flex-shrink 取 1。</li>
</ul>
<blockquote>
<h2 id="举一个不同的值之间的区别："><a href="#举一个不同的值之间的区别：" class="headerlink" title="举一个不同的值之间的区别："></a>举一个不同的值之间的区别：</h2><pre class=" language-jsx"><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style language-css">
<span class="token selector"><span class="token class">.parent</span> </span><span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">600</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.parent</span> > div </span><span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.item-1</span> </span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">140</span>px<span class="token punctuation">;</span>
  <span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">2</span> <span class="token number">1</span> <span class="token number">0%</span><span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.item-2</span> </span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
  <span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">2</span> <span class="token number">1</span> auto<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> darkblue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.item-3</span> </span><span class="token punctuation">{</span>
  <span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">1</span> <span class="token number">1</span> <span class="token number">200</span>px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> lightblue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
</code></pre>
<p>主轴上父容器总尺寸为 600px; 子元素的总基准值是：0% + auto + 200px = 300px，其中</p>
<pre class=" language-cpp"><code class="language-cpp"><span class="token operator">-</span> <span class="token number">0</span><span class="token operator">%</span> 即 <span class="token number">0</span> 宽度
<span class="token operator">-</span> <span class="token keyword">auto</span> 对应取主尺寸即 100px
</code></pre>
<p>故剩余空间为 600px - 300px = 300px<br> 伸缩放大系数之和为： 2 + 2 + 1 = 5<br> 剩余空间分配如下:</p>
<pre class=" language-undefined"><code class="language-undefined">- item-1 和 item-2 各分配 2/5，各得 120px
- item-3 分配 1/5，得 60px
</code></pre>
<p>各项目最终宽度为:</p>
<pre class=" language-cpp"><code class="language-cpp"><span class="token operator">-</span> item<span class="token number">-1</span> <span class="token operator">=</span> <span class="token number">0</span><span class="token operator">%</span> <span class="token operator">+</span> 120px <span class="token operator">=</span> 120px
<span class="token operator">-</span> item<span class="token number">-2</span> <span class="token operator">=</span> <span class="token keyword">auto</span> <span class="token operator">+</span> 120px <span class="token operator">=</span> 220px
<span class="token operator">-</span> item<span class="token number">-3</span> <span class="token operator">=</span> 200px <span class="token operator">+</span> 60px <span class="token operator">=</span> 260px
</code></pre>
<ul>
<li><strong>当 item-1 基准值取 0% 的时候，是把该项目视为零尺寸的，故即便声明其尺寸为 140px，也并没有什么用，形同虚设</strong></li>
<li><strong>而 item-2 基准值取 auto 的时候，根据规则基准值使用值是主尺寸值即 100px，故这 100px 不会纳入剩余空间</strong></li>
</ul>
<p><a href="https://www.jianshu.com/p/7827e7ecfd64" target="_blank" rel="noopener">参考简书 flex 基础、felx-basis 解析</a></p>
</blockquote>
</li>
<li><p>align-self：允许单个项目有和其他项目不一样的对齐方式，可覆盖 align-items 属性，默认 auto（继承父元素 align-items，没有父元素等同与 stretch）</p>
</li>
</ul>
<h3 id="如何实现下划线"><a href="#如何实现下划线" class="headerlink" title="如何实现下划线"></a>如何实现下划线</h3><ul>
<li><p><s>border</s></p>
</li>
<li><p><code>text-decoration:underline</code>或给要加上下划线的部分用 <code>&lt;u&gt;&lt;/u&gt;</code> 包裹，必须要有文本内容，否则不会显示下划线，而且只有文字部分有下划线</p>
</li>
<li><p>利用 css 伪类配合 scale 完成???</p>
<h4 id="0-5px-的边框"><a href="#0-5px-的边框" class="headerlink" title="0.5px 的边框"></a>0.5px 的边框</h4><p>安卓手机无法识别 0.5px 的 border：对于浮点型数据会进行四舍五入，这个时候采用的方法一般是通过 <code>transform:scale(0.5)</code>将其缩小一半，可以是普通的 <code>boder: 1px solid</code>，或者通过伪元素，设置<code>width: 200%; height: 1px</code></p>
</li>
<li><p>利用伪元素 after before：创建一个块元素，使其位于当前元素底部，并设定高宽和颜色</p>
</li>
</ul>
<h3 id="计数器实现目录结构"><a href="#计数器实现目录结构" class="headerlink" title="计数器实现目录结构"></a>计数器实现目录结构</h3><p>css counter-reset定义一个计数器后面跟一个名字，这个属性在哪个元素上设置则标示遇到这个元素我就重新开始计数。</p>
<pre class=" language-html"><code class="language-html">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>gdfg
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>dfs<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>sdaf
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>dsfa<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>fsda<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<pre class=" language-css"><code class="language-css">    <span class="token selector"><span class="token class">.list2</span></span><span class="token punctuation">{</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">10</span>px<span class="token punctuation">;</span>
        <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#ccc</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.list2</span> li</span><span class="token punctuation">{</span>
        <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token selector">// 遇到ul就重新计数（添加一个新的计数器，原计数器不受影响）。
    <span class="token class">.list2</span> ul</span><span class="token punctuation">{</span>
        <span class="token property">counter-reset</span><span class="token punctuation">:</span> xuhao<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token selector">// counters,第一参数接收计数器，第二参数指明新的计数值以什么字符链接在上一级计数值得后面
    <span class="token class">.list2</span> li<span class="token pseudo-element">::before</span></span><span class="token punctuation">{</span>
        <span class="token property">counter-increment</span><span class="token punctuation">:</span> xuhao<span class="token punctuation">;</span>
        <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counters</span><span class="token punctuation">(</span>xuhao, <span class="token string">"."</span><span class="token punctuation">)</span> <span class="token string">" "</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre>
<blockquote>
<p><a href="https://www.jianshu.com/p/c7dcb3008e5c" target="_blank" rel="noopener">参考</a></p>
</blockquote>
<h3 id="常用伪类伪元素"><a href="#常用伪类伪元素" class="headerlink" title="常用伪类伪元素"></a>常用伪类伪元素</h3><p>伪类：像类选择器一样给某个<strong>已存在的DOM元素</strong>添加额外样式，一个冒号隔开。常见伪类有：</p>
<ul>
<li><p>link（鼠标点击之前）、active（鼠标点击时）、visited（鼠标点击后）、hover</p>
</li>
<li><p><code>:first-child</code>、<code>:last-child</code>、<code>nth-child(n/odd/even)</code>（n表示给第n个元素添加样式、odd 奇、even偶） </p>
<p><code>nth-last-child</code>，传递参数为 n 时表示匹配属于其元素的第 n 个子元素（从最后一个子元素开始计数），使用公式 an+b，n为计数器（从0开始），也可以传递 odd 或 even 表示奇数个或偶数个</p>
</li>
</ul>
<p>伪元素：给出一个<strong>虚拟元素</strong>，给这个虚拟元素添加样式，两个冒号隔开。常用伪元素：</p>
<ul>
<li><code>::before</code>，<code>::after</code>，content 属性必须设置，可以设置为空（伪元素不存在于 DOM 但可以添加内容原因）。</li>
</ul>
<h3 id="高度、宽度"><a href="#高度、宽度" class="headerlink" title="高度、宽度"></a>高度、宽度</h3><p>获取元素的大小和相对于视口的位置：Element.getBoundingClientRect()</p>
<h3 id="设置页面元素显隐"><a href="#设置页面元素显隐" class="headerlink" title="设置页面元素显隐"></a>设置页面元素显隐</h3><ul>
<li><p>display:none</p>
<p>脱离文档流，如果重新显示需要回流。</p>
<p>修改其中子元素 display 属性不会重新显示出来</p>
<p>元素上面添加的 click 事件不会触发</p>
</li>
<li><p>opacity:0</p>
<p>占据原来位置，不会进行回流，<strong>可能会进行重绘</strong>。因为具有 transition 或 animation 的 opacity 元素，渲染层被提升为合成层，translateZ(0) 或 translate3d(0,0,0) 可以认为强制创建合成层。元素提升为合成层后，transform 和 opacity 不会触发重绘，GPU可以改变之前画好页面的透明值</p>
<p><strong>修改其中子元素 opacity 属性不会重新显示出来</strong></p>
<p>元素上面的 click 事件仍可以触发</p>
</li>
<li><p>visibility:hidden</p>
<p>占据原来位置，不会进行回流，会进行重绘</p>
<p><strong>修改其中子元素 visibility 的值可以重新显示出来</strong></p>
<p><strong>元素上面的 click 事件不能触发</strong></p>
</li>
</ul>
<h3 id="css-轮播图-实现思路"><a href="#css-轮播图-实现思路" class="headerlink" title="css 轮播图 实现思路"></a>css 轮播图 实现思路</h3><p>首先图片全部显示出来，排成一行，图片外包裹 div，绝对定位，<code>white-space: nowrap</code> 不换行，这个 div 外再包裹一层，<code>overflow: hidden</code>。定时改变图片外包裹 div 的left值。</p>
<p>关于无限循环到最后一个元素时跳到第一个元素的动画方向问题：这里采用的解决方法在开头第一张图前加上最后一张图，在滚动到最后一个元素时，自动将动画效果去除并跳到开头第一张图前面的那张图，然后再开始循环。</p>
<p><a href="https://codepen.io/jackchuchou/pen/GRZNeRj" target="_blank" rel="noopener">例子</a></p>
<h3 id="写个小图标"><a href="#写个小图标" class="headerlink" title="写个小图标"></a>写个小图标</h3><ul>
<li>三角箭头：首先三角形可以使用 css 的 border 来绘制，即设置四个方向的颜色，将三面设置为透明就可以显示出一个三角形。将一个有颜色的三角形和一个白色的三角形以一定间距叠加，就可以显示出一个箭头符号</li>
<li>圆形进度条：圆形加载可以先通过 border 构建一个圆形边框，边框上 1/4 部分有不同颜色，然后让这个圆形边框动起来，通过 animation 和 keyframes，keyframes 中 transform 从 rotate 0deg 到 360deg，设置一下动画循环次数 animation-iteration-count 为 infinite 让其无限旋转下去</li>
</ul>
<p><a href="https://codepen.io/jackchuchou/pen/xxVdgbJ" target="_blank" rel="noopener">实现 demo</a></p>
<h3 id="link-和-import-的区别"><a href="#link-和-import-的区别" class="headerlink" title="link 和 @import 的区别"></a>link 和 @import 的区别</h3><ul>
<li><p>link属于XHTML标签，而@import完全是css提供的一种方式。link标签除了可以加载css外，还可以做很多其他的事情，比如<strong>定义RSS，定义rel连接属性</strong>等，@import只能加载CSS。</p>
</li>
<li><p>加载顺序的差别：当一个页面被夹在的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。</p>
</li>
<li><p><strong>兼容性</strong>的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，<strong>@import只有在IE5以上</strong>的才能识别，而link标签无此问题，完全兼容。</p>
</li>
<li><p>使用dom控制样式时的差别。<strong>当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的</strong>（不支持）。</p>
</li>
<li><p>@import可以在css中再次引入其他样式表，比如创建一个主样式表，在主样式表中再引入其他的样式表</p>
</li>
</ul>
<h3 id="css-文本省略"><a href="#css-文本省略" class="headerlink" title="css 文本省略"></a>css 文本省略</h3><p>text-overflow: ellipsis</p>
<h4 id="多行文字，特定行截断"><a href="#多行文字，特定行截断" class="headerlink" title="多行文字，特定行截断"></a>多行文字，特定行截断</h4><ul>
<li><p>可以通过 -webkit-line-clamp 使文字不超过指定行，它需要和 display、-webkit-box-orient 和 overflow 结合使用：</p>
<ul>
<li><code>display: -webkit-box;</code> 必须结合的属性，将对象作为弹性伸缩盒子模型显示。</li>
<li><code>-webkit-box-orient;</code> 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式</li>
<li><code>text-overflow: ellipsis;</code> 可选属性，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。</li>
</ul>
<p>缺点是兼容性（该属性是 webkit 私有属性，只支持 webkit 内核浏览器）、开发点击展开交互不是很方便（不知道是否有超出）</p>
<blockquote>
<p><a href="https://codepen.io/toxic-johann/pen/XELYGL" target="_blank" rel="noopener">demo</a></p>
</blockquote>
</li>
<li><p>float 模拟实现：有个三个盒子 div，粉色盒子左浮动，浅蓝色盒子和黄色盒子右浮动，</p>
<ol>
<li><strong>当浅蓝色盒子的高度低于粉色盒子，黄色盒子仍会处于浅蓝色盒子右下方。</strong></li>
<li><strong>如果浅蓝色盒子文本过多，高度超过了粉色盒子，则黄色盒子不会停留在右下方，而是掉到了粉色盒子下。</strong></li>
</ol>
<p><img src="/2020/09/24/css-interview/css-wrap-overflow.jpg" alt="原理"></p>
<blockquote>
<p><a href="https://codepen.io/toxic-johann/pen/bvPjOJ" target="_blank" rel="noopener">demo</a></p>
<p><a href="https://zhuanlan.zhihu.com/p/34326190" target="_blank" rel="noopener">参考：纯 css 实现多行文字截断</a></p>
</blockquote>
</li>
</ul>
<h3 id="高度优先级问题"><a href="#高度优先级问题" class="headerlink" title="高度优先级问题"></a>高度优先级问题</h3><p>max-height、min-height、height 同时使用</p>
<p>当 height、max-height 同时使用时，小的生效。</p>
<ul>
<li>max-height &lt; height，元素高度 max-height</li>
<li>height &lt; max-height，元素高度 height</li>
</ul>
<p>当 height、max-height、min-height 同时使用时，</p>
<ul>
<li>height &gt; max-height &gt; min-height，元素高度 max-height</li>
<li>height &gt; min-height &gt; max-height，元素高度 min-height</li>
<li>min-height &gt; height &gt; max-height，元素高度 min-height</li>
</ul>
<h3 id="css-Module-与-css-in-js"><a href="#css-Module-与-css-in-js" class="headerlink" title="css Module 与 css in js"></a>css Module 与 css in js</h3><p>css in js ： 用 js 对象来封装 css 样式使用，作为行内样式插入<br>css Module： 使用一个独一无二的 class 名字，不会与其他选择器重名。通常对一个类名进行哈希编码，html 中在引入的时候以对象属性的方式引入，构建工具会进行编译处理</p>
<h3 id="border-与-outline-的区别"><a href="#border-与-outline-的区别" class="headerlink" title="border 与 outline 的区别"></a>border 与 outline 的区别</h3><ul>
<li>border 占用空间，outline 不占用空间，不影响元素的位置和尺寸</li>
<li>border 适用于所有有形的 html 元素，outline 针对链接、表单控件等设计，如 input 元素自带 outline，在 focus 时显示 outline，在 blur 不显示。可以用 outline 来做悬停的动态效果，且没有 hover 添加 border 影响元素定位和大小。</li>
</ul>
<h3 id="css-的加载与性能"><a href="#css-的加载与性能" class="headerlink" title="css 的加载与性能"></a>css 的加载与性能</h3><p>link，css 的加载会影响到后面 js 语句的执行，link 无论是在 head 中还是 body 中。</p>
<p>link 不会影响到 dom 的解析，但会影响到dom渲染即 dom 渲染。</p>
<p>link 会阻塞首屏渲染</p>
<blockquote>
<p>参考：</p>
<p><a href="https://blog.csdn.net/weixin_30480651/article/details/94827689?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&amp;depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight" target="_blank" rel="noopener">css 影响 demo</a></p>
</blockquote>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2020/09/24/react-interview/" rel="next" title="前端面试总结 react 部分">
                <i class="fa fa-chevron-left"></i> 前端面试总结 react 部分
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2020/09/24/browser-interview/" rel="prev" title="前端面试总结 browser 部分">
                前端面试总结 browser 部分 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
    </div>
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">renhao</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">94</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">19</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#BFC"><span class="nav-number">1.</span> <span class="nav-text">BFC</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#BFC的生成"><span class="nav-number">1.1.</span> <span class="nav-text">BFC的生成</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#BFC的约束规则"><span class="nav-number">1.2.</span> <span class="nav-text">BFC的约束规则</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#BFC在布局中的应用"><span class="nav-number">1.3.</span> <span class="nav-text">BFC在布局中的应用</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#水平居中"><span class="nav-number">2.</span> <span class="nav-text">水平居中</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#垂直居中"><span class="nav-number">3.</span> <span class="nav-text">垂直居中</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#css-中可以继承的属性"><span class="nav-number">4.</span> <span class="nav-text">css 中可以继承的属性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#css-作用域（选择器）权重"><span class="nav-number">5.</span> <span class="nav-text">css 作用域（选择器）权重</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#z-index-有什么属性会影响"><span class="nav-number">6.</span> <span class="nav-text">z-index 有什么属性会影响</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#position属性常用的取值和它们的基本行为"><span class="nav-number">6.1.</span> <span class="nav-text">position属性常用的取值和它们的基本行为</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#相对于什么"><span class="nav-number">6.2.</span> <span class="nav-text">% 相对于什么</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#sass、less-相较于-css-有哪些优点"><span class="nav-number">6.3.</span> <span class="nav-text">sass、less 相较于 css 有哪些优点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#flex-布局（flexible-box，弹性布局）常用属性"><span class="nav-number">6.4.</span> <span class="nav-text">flex 布局（flexible box，弹性布局）常用属性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#父元素上"><span class="nav-number">6.4.1.</span> <span class="nav-text">父元素上</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#子元素"><span class="nav-number">6.4.2.</span> <span class="nav-text">子元素</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#举一个不同的值之间的区别："><span class="nav-number">7.</span> <span class="nav-text">举一个不同的值之间的区别：</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#如何实现下划线"><span class="nav-number">7.1.</span> <span class="nav-text">如何实现下划线</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#0-5px-的边框"><span class="nav-number">7.1.1.</span> <span class="nav-text">0.5px 的边框</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#计数器实现目录结构"><span class="nav-number">7.2.</span> <span class="nav-text">计数器实现目录结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#常用伪类伪元素"><span class="nav-number">7.3.</span> <span class="nav-text">常用伪类伪元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#高度、宽度"><span class="nav-number">7.4.</span> <span class="nav-text">高度、宽度</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#设置页面元素显隐"><span class="nav-number">7.5.</span> <span class="nav-text">设置页面元素显隐</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#css-轮播图-实现思路"><span class="nav-number">7.6.</span> <span class="nav-text">css 轮播图 实现思路</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#写个小图标"><span class="nav-number">7.7.</span> <span class="nav-text">写个小图标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#link-和-import-的区别"><span class="nav-number">7.8.</span> <span class="nav-text">link 和 @import 的区别</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#css-文本省略"><span class="nav-number">7.9.</span> <span class="nav-text">css 文本省略</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#多行文字，特定行截断"><span class="nav-number">7.9.1.</span> <span class="nav-text">多行文字，特定行截断</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#高度优先级问题"><span class="nav-number">7.10.</span> <span class="nav-text">高度优先级问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#css-Module-与-css-in-js"><span class="nav-number">7.11.</span> <span class="nav-text">css Module 与 css in js</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#border-与-outline-的区别"><span class="nav-number">7.12.</span> <span class="nav-text">border 与 outline 的区别</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#css-的加载与性能"><span class="nav-number">7.13.</span> <span class="nav-text">css 的加载与性能</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">renhao</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">265.9k</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  










  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: false,
        notify: false,
        appId: '2P1xqUWiCoNm14MH4yhURlJi-gzGzoHsz',
        appKey: 'uJN0uagHIVgXtBO1OuLV9Ban',
        placeholder: 'Just go go',
        avatar:'mm',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>



  





  

  

  

  
  

  

  

  

</body>
</html>
